<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
    get() {
        return route.query.search ?? ''
    },
    set(search) {
        router.replace({ query: { search } })
    }
})
</script>

<template>
    <h2>AboutView</h2>
    <label>
        Search: <input v-model.trim="search" maxlength="20">
    </label>
</template>